<template>
	<div>
		setup测试页<br />
		{{num}}
		{{user.age}}
		<button @click="add()">++</button>
		选择性别：<select name="sex">
			<option v-for="sex in dicts.sexs" :key="sex.id" value="sex.id">{{sex.sex}}</option>
		</select>
		选择城市：<select name="city">
			<option v-for="city in dicts.citys" :key="city.id" value="city.id">{{city.name}}</option>
		</select>
	</div>
	
</template>

<script setup>
	//ref reactive把变量定义成响应式的
	//1. ref可以定义基本数据类型和引用类型 reactive只能定义引用类型

import { ref } from 'vue';

	//2.用ref定义的变量在js中获取时 用num.value  用reactive定义的变量不用 。value
	let num=ref(10);
	let user=ref({name:"uuu",age:15});
	let dicts=ref(
	{
		sexs:[{id:"1",sex:"男"},{id:"2",sex:"女"}],
		citys:[{id:"1",name:"shenyang"},{id:"2",name:"dalian"}]
	}
	)
	let add=()=>{
		
		num.value++;
		user.value.age++;
		alert(num.value);
		
	}
	
</script>

<style>
</style>